/** * 封装scroll-view */
<template>
  <scroll-view
    v-if="showScrollView"
    class="u-scroll-view"
    scroll-y
    :style="compStyle"
    :scroll-top="scrollTop"
    :refresher-enabled="refresherEnabled"
    :refresher-triggered="refresherTriggered"
    :refresher-default-style="refresherStyle"
    @refresherpulling="bindrefresherpulling"
    @refresherrefresh="bindrefresherrefresh"
    @refresherrestore="bindrefresherrestore"
    @refresherabort="bindrefresherabort"
    @scrolltolower="onScrolltoLower"
    @scroll="onScroll"
  >
    <!-- :refresher-threshold="60" -->
    <!-- :refresher-background="BG_COLOR_GARY" -->
    <slot></slot>
  </scroll-view>
</template>

<script>
/**
 * 这是一个滚动组件
 */
export default {
  props: {
    /**
     * scroll-view样式
     */
    compStyle: {
      type: String,
      default: "",
    },

    /**
     * 是否开启自定义刷新
     */
    refresherEnabled: {
      type: [Boolean, String],
      default: false,
    },
  },

  data() {
    return {
      scrollTop: 0,
      refresherTriggered: false,
      // BG_COLOR_GARY: "#ffffff",
      refresherStyle: "black",
      showScrollView: false,
    };
  },

  computed: {},

  created() {
    // const {BG_COLOR_GARY, scrollView} = this.$utils.getThemeColors()
    // const {refresherStyle} = scrollView
    // this.BG_COLOR_GARY = BG_COLOR_GARY
    // this.refresherStyle = refresherStyle
    this.showScrollView = true;
  },

  methods: {
    // 自定义下拉刷新控件被下拉
    bindrefresherpulling(e) {
      if (!this.refresherpulling) {
        this.refresherpulling = true;
      }
    },

    // 自定义下拉刷新被触发
    bindrefresherrefresh(e) {
      if (this.refresherTriggered) {
        return;
      }
      this.refresherTriggered = true;
      this.$emit("refresh");
    },

    // 自定义下拉刷新被复位
    bindrefresherrestore() {
      if (this.refresherTriggered) {
        this.refresherTriggered = false;
      }
      this.setPullingStatus();
    },

    // 自定义下拉刷新被中止
    bindrefresherabort() {
      this.setPullingStatus();
    },

    //
    onScrolltoLower() {
      if (this.refresherpulling) {
        return;
      }
      this.$emit("scrolltolower");
    },

    // 手动关闭刷新
    stopPullDownRefresh() {
      this.refresherTriggered = false;
    },

    setPullingStatus() {
      setTimeout(() => {
        this.refresherpulling = false;
      }, 20);
    },

    onScroll(e) {
      const { scrollTop } = e.detail;
      if (!this.scroll && scrollTop > 1) {
        this.scrollTop = scrollTop;
        this.scroll = true;
      } else if (scrollTop == 0) {
        this.scroll = false;
      }
    },

    setScrollTop(scrollTop) {
      if (scrollTop == 0) {
        if (!this.scroll) {
          return;
        }
      }
      this.scroll = false;
      this.scrollTop = scrollTop;
    },
  },
};
</script>

<style lang="scss">
.u-scroll-view {
  height: 100%;
}
</style>
